<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
onMounted(
     ()=>{
      if (typeof BMapGL !== 'undefined') {
        map = initMap();
        loadStation();
      } else {
        console.error('百度地图API加载失败');
      }
    }
)
let map={};
const stationArea=ref([{area:'东城区',value:'东城区'},{area:'西城区',value:'西城区'},{area:'朝阳区',value:'朝阳区'},{area:'海淀区',value:'海淀区'},{area:'大兴区',value:'大兴区'},
  {area:'丰台区',value:'丰台区'},{area:'石景山区',value:'石景山区'},{area:'门头沟区',value:'门头沟区'},{area:'通州区',value:'通州区'},{area:'房山区',value:'房山区'},{area:'延庆区',value:'延庆区'},
  {area:'昌平区',value:'昌平区'},{area:'顺义区',value:'顺义区'},{area:'怀柔区',value:'怀柔区'},{area:'密云区',value:'密云区'},{area:'平谷区',value:'平谷区'}]);

const initMap=()=>{
  var map = new BMapGL.Map("container");
  map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 11.5);
  map.enableScrollWheelZoom(true);
  return map;
}
let pointList=[];
const makeMarkPoint=(map)=>{
  for (let position of stationList.value){
    let icon = new BMapGL.Icon(
        'https://s1.4sai.com/src/img/png/02/0289165d4f314db78acb9e77bd4e6948.png?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:VI4gpo1M00uRNzCyyiKhoZ6Ab_w=',
        new BMapGL.Size(30, 45)
    );
    let stationPosition=JSON.parse(position.stationPosition);
    var marker = new BMapGL.Marker(new BMapGL.Point(stationPosition.lng,stationPosition.lat),{icon:icon});
    pointList.push(marker);
    map.addOverlay(marker);
    var opts={width:200,height:100,title:position.stationName};
    var infoWindow=new BMapGL.InfoWindow(position.stationLocation,opts);
    bindInfoWindow(marker,infoWindow);
  }
}
const bindInfoWindow=(marker,infoWindow)=>{
  marker.addEventListener('click',function (){
    map.openInfoWindow(infoWindow,marker.getPosition());
  })
}
const stationList=ref([]);
const searchStation=ref({stationName:'',stationLocation:''});
const loadStation=()=>{
  let data=qs.stringify(searchStation.value);
  stationList.value=[];
  axios.get(BASE_URL+'/station/load?'+data)
      .then((response)=>{
        if (response.data.code == 2000){
          if (response.data.data.length==0){
            ElMessage.warning("很抱歉，没有您查询的站点，请查询其他消息");
            return;
          }
          console.log(response.data.data);
          stationList.value=response.data.data;
          console.log(stationList.value);
          makeMarkPoint(map);
        }
        else {
          ElMessage.error(response.data.msg);
        }
      })
}

let infoWindowsList=[];
const showPontInfo=()=>{
  for (let station of stationList.value){

  }

}

</script>

<template>
  <div class="station-top">
    <el-card class="station-top-search">
      <el-form>
        <el-form-item style="margin-left: 150px">
          <span style="margin-right: 20px;color: #999999;font-size: 14px">搜索站点</span>
          <el-input placeholder="请输入站点名称检索站点" @keydown.enter="loadStation" style="width: 70%" v-model="searchStation.stationName"></el-input>
          <el-button type="primary" @click="loadStation">检索站点</el-button>
        </el-form-item>
        <hr style="color: #999999;height: 1px;width: 100%">
        <el-form-item  style="margin-left: 150px">
          <span style="position: relative ; bottom: 15px">站点区域</span>
          <div class="station-area">
            <el-button text v-for="station in stationArea" @click="searchStation.stationLocation=station.area">{{station.area}}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <div class="station-infoCard">
    <el-card v-for="station in stationList">
      <h4>{{station.stationName}}</h4>
      <p>{{station.stationLocation}}</p>
      <p>联系电话:0776-123456</p>
      <p>营业时间:08:00-22:00</p>
    </el-card>
  </div>
  <div id="container"></div>


</template>

<style scoped>
#container {
  float: left;
  overflow: hidden;
  width: 80%;
  height: 900px;
  margin: 0;
  font-family: "微软雅黑";
}
.station-area{
  display: inline-block;
  width: 80%;
}
.station-area > button{
  margin-left: 10px;
  transition: 0.5s;
}

.station-area > button:hover{
  color: #42b983;
}
.station-infoCard{
  float: left;
  width: 20%;
  max-height: 900px;
  height: auto;
  overflow: auto;
}
.station-infoCard p{
  font-size: 12px;
  color: #999999;
}
</style>